<template>
  <div class="search-popup">
    <md-popup v-model="isPopupShow" position="right">
      <div class="content">
        <div class="content-hd">搜索</div>
        <md-field>
          <md-input-item title="产品实例标识" placeholder="请输入" v-model="form.productNo"/>
          <md-input-item title="电路名称" placeholder="请输入" v-model="form.circName"/>
          <md-input-item title="报障编号" placeholder="请输入" v-model="form.warningNo"/>
          <md-field-item
            title="告警发生时间"
            arrow="arrow-right"
            align="right"
            :content="form.eventTimeStart"
            @click.native="isStartTimePickerShow = true"/>
          <md-field-item
            title="告警结束时间"
            arrow="arrow-right"
            align="right"
            :content="form.eventTimeEnd"
            @click.native="isEndTimePickerShow = true"/>
        </md-field>
        <div class="content-ft">
          <md-button @click="reset">重置</md-button>
          <md-button type="primary" @click="search">搜索</md-button>
        </div>
      </div>
    </md-popup>
    <md-date-picker
      ref="startTimePicker"
      v-model="isStartTimePickerShow"
      type="custom"
      title="告警发生时间"
      :custom-types="['yyyy', 'MM','dd', 'hh', 'mm']"
      :default-date="startDate"
      @confirm="onStartTimeConfirm"/>
    <md-date-picker
      ref="endTimePicker"
      v-model="isEndTimePickerShow"
      type="custom"
      title="告警结束时间"
      :custom-types="['yyyy', 'MM','dd', 'hh', 'mm']"
      :default-date="endDate"
      @confirm="onEndTimeConfirm"/>
  </div>
</template>

<script type="text/ecmascript-6">
import moment from 'moment';
import {
  Field,
  Selector,
  InputItem,
  FieldItem,
  Button,
  DatePicker,
  Popup,
  PopupTitleBar,
  Dialog
} from 'mand-mobile';

export default {
  name: 'dx-search-alarm',
  components: {
    [Field.name]: Field,
    [Selector.name]: Selector,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [DatePicker.name]: DatePicker,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar
  },
  props: {
    // 格式为查询参数，例如 customerCode=1212&customerName=测试
    defaultValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isPopupShow: false,
      isStartTimePickerShow: false,
      isEndTimePickerShow: false,
      startDate: new Date(),
      endDate: new Date(),
      form: {}
    };
  },
  // model: {
  //   prop: 'defaultValue',
  //   event: 'change'
  // },
  created() {
    this.reset();
  },
  methods: {
    showPopup() {
      this.isPopupShow = true;
    },
    onStartTimeConfirm() {
      const time = this.$refs.startTimePicker.getFormatDate();
      const after = moment(time).isBefore(this.form.eventTimeEnd);
      if (!after) {
        Dialog.alert({
          title: '提示',
          content: '开始时间不能大于结束时间',
          confirmText: '确定'
        });
        return;
      }
      this.form.eventTimeStart = moment(time, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DD HH:mm:ss');
    },
    onEndTimeConfirm() {
      const time = this.$refs.endTimePicker.getFormatDate();
      const before = moment(time).isBefore(this.form.eventTimeStart);
      if (before) {
        Dialog.alert({
          title: '提示',
          content: '结束时间不能小于开始时间',
          confirmText: '确定'
        });
        return;
      }
      this.form.eventTimeEnd = moment(time, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DD HH:mm:ss');
    },
    reset() {
      this.form = {
        productNo: '',
        circName: '',
        warningNo: '',
        eventTimeStart: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
        eventTimeEnd: moment().format('YYYY-MM-DD HH:mm:ss')
      };
      if (this.defaultValue) {
        const queryList = this.defaultValue.split('&');
        queryList.forEach(query => {
          const strArr = query.split('=');
          this.form[strArr[0]] = strArr[1];
        });
      }
    },
    search() {
      this.isPopupShow = false;
      this.$emit('on-search', this.form);
    }
  }
};
</script>

<style lang="stylus" scoped>
  .search-popup
    /deep/ .md-slide-left
      width : 80%

    ::v-deep.md-field-item.is-solid
      .md-field-item-title
        width : 200px

    .content
      position : relative
      height : 100%
      background : #fff

      .content-hd
        height : 88px
        line-height : 88px
        font-size : 32px
        text-align : center

      .content-ft
        position : absolute
        bottom : 0
        padding : 20px
        display : flex
        width : 100%

        .md-button
          margin-right : 20px

          &:last-of-type
            margin-right : 0

    .md-field
      padding : 0 20px
</style>
